<template>
  <div class="count-down">
    <text class="label" v-if="label">{{label}} </text>
    <text class="val">{{hour}}</text>
    <text class="split-dot">:</text>
    <text class="val" v-if="label">{{min}}</text>
    <text class="split-dot">:</text>
    <text class="val" v-if="label">{{sec}}</text>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  .count-down {
    flex-direction: row;
    height: 36px;
    align-items: center;
    justify-content: center;
  }
  .label {
    color: #686868;
    font-size: 24px;
  }
  .split-dot {
    font-size: 24px;
    color: $color;
    margin: 0 5px;
  }
  .val {
    background-color: #464553;
    color: #ffffff;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
    font-size: 24px;
  }
</style>
<script>
let secondsFormatter = require('../include/seconds-formatter')
module.exports = {
  props: {
    seconds: {default: 0},
    label: {default: '距开始'},
    hour: {default: 0},
    min: {default: 0},
    sec: {default: 0}
  },

  data () {
    return {}
  },
  components: {},
  created () {
    setInterval(() => {
      if (this.seconds < 0) {
        this.hour = this.min = this.sec = 0
        return
      }
      let timeInfo = secondsFormatter.timeInfo(this.seconds--)
      this.hour = timeInfo.hour
      this.min = timeInfo.min
      this.sec = timeInfo.sec
      this.$emit('update:seconds', this.seconds)
    }, 1000)
  },
  methods: {}
}
</script>
